<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--====== USEFULL META ======-->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--====== TITLE TAG ======-->
<title>注册</title>
<link rel="shortcut icon" type="image/ico" href="images/favicon.png" th:href="@{/images/favicon.png}"/>
<!--====== STYLESHEETS ======-->
<link rel="stylesheet" href="css/font-awesome-min.css" th:href="@{/css/font-awesome-min.css}">
<link rel="stylesheet" href="css/bootstrap-min.css" th:href="@{/css/bootstrap-min.css}">
<link rel="stylesheet" href="css/normalize.css" th:href="@{/css/normalize.css}">
<link rel="stylesheet" href="css/animate.css" th:href="@{/css/animate.css}">
<link rel="stylesheet" href="css/lity.css" th:href="@{/css/lity.css}">
<link rel="stylesheet" href="css/slick-nav.css" th:href="@{/css/slick-nav.css}">
<link rel="stylesheet" href="css/slick-slider.css" th:href="@{/css/slick-slider.css}">
<link rel="stylesheet" href="css/theme.css" th:href="@{/css/theme.css}">
<!--====== MAIN STYLESHEET ======-->
<link href="style.css" rel="stylesheet" th:href="@{/style.css}">
<link href="css/responsive.css" rel="stylesheet" th:href="@{/css/responsive.css}">
<script src="js/vendor/modernizr.js"></script>

</head>

<body data-spy="scroll" data-target=".mainmenu-area" data-offset="50">

<!-- Page cursor -->
<div class='cursor' id="cursor"></div>
<div class='cursor2' id="cursor2"></div>
<div class='cursor3' id="cursor3"></div>
<!-- Preloader-Content -->
<div class="preloader">
	<img src="images/preloader.gif" alt="preloader">
</div>
<!-- Popup-Search-Form -->

<!-- Popup-Search-Form-End -->
<!-- Full-Wrapper-Start -->
<div class="full-wrapper">
	<!-- Mainmenu-Area-Start -->
	<div th:replace="~{commons/bar :: topbar}"></div>
	
	<form method="post" style="margin-top: 13px;" class="form-signin1" th:action="@{/handle_form}" id="test11" action="login.html">
			<h1 class="h2">注  册</h1>
			<p>用户名：</p>
			<input th:attr="qq='true'" name="username" id="nicheng" class="form-control"  >
			<span id="nicheng1"></span>
			<p>手机号：</p>
			<input type=""  th:attr="qq='true'" name="phonenumber" id="phone" class="form-control"    >
			<span id="phone1"></span>
			<p>密码：</p>
			<input type="password" class="form-control"   id="ipwd">
			<span id="msg_pwd1"></span>
			<p>确认密码：</p>
			<input type="password" name="passw"  class="form-control"   id="i2pwd" >
			<span id="msg_pwd2"></span>
			<p>邮箱：</p>
			<input th:attr="qq='true'" type="email" name="email" id="email" class="form-control"  >
			<span id="email1"></span>
			<p>验证码：</p>
			<input th:attr="qq='true'" id="qwer" style="float: left;width: 151px;" type="text" class="form-control"  size="6" maxlength="5">
			<img style="height: 38px;width: 149px;float: left;" id="img"   onclick="Code()" src="/captcha/2" alt="">
			<span id="yzm"></span>
			<br>已有账号？点击<a href="login.html">登录！</a>
			<button class="btn btn-lg btn-primary btn-block" type="submit" id="btn_register">注 册</button>
		
	</form>


	
	<footer style="position: fixed;" class="footer-area rboom">
		
		<div class="footer-bottom">
			<div class="container">
				<div class="row">
					<div class="col-lg-6 offset-lg-3 text-center">
						<div class="copyright">
							<p>Copyright &copy; 2020. Bi Jia Wang All rights reserved.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<form id="zx" action="/mylogout" th:action="@{/mylogout}" th:method="post">

	</form>
</div>
<!-- Full-Wrapper-End -->
<!--=======  SCRIPTS =======-->
<script src="js/vendor/jquery-min.js"></script>
<!--=======  PLUGINS =======-->
<script src="js/popper-min.js"></script>
<script src="js/bootstrap-min.js"></script>
<script src="js/lity-min.js"></script>
<script src="js/slick-slider-min.js"></script>
<script src="js/slick-nav.js"></script>
<script src="js/wow-min.js"></script>
<script src="js/clickzx.js"></script>
<!--=======  ACTIVE JS =======-->
<script src="js/script.js"></script>
<script type="text/javascript">
	function Code() {
		document.getElementById("img").src="/captcha/"+Math.random();
	}


$(document).ready(function(){

	
	$("#ipwd").blur(test1);
	$("#i2pwd").blur(test2);
	$("#i2pwd").blur(password);
	$("#qwer").blur(qq);
	$("#nicheng").blur(nicheng);
	$("#phone").blur(isPhone);
	$("#email").blur(isEmail);
	$("#btn_register").click(function () {
		$("#test11").submit(checkxinxi);
	});

	function nicheng() {
		var text = $("#nicheng").val();
		if (text.length === 0){
			$("#nicheng1").html("<font color='red'>请输入用户名</font>");
			return false;
		}else {
			$.ajax({
				type: "GET",
				url: "/checkUsername/" + text,
				success:function (qq) {
					if (qq === "true"){
						$("#nicheng1").html("");
						$("#nicheng").attr("qq",'true');
					}else {
						$("#nicheng1").html("<font color='red'>用户名已占用</font>");
						$("#nicheng").attr("qq",'true');
					}
				}
			});
			return $("#nicheng").attr("qq") === "true";
		}
	}

	function isEmail() {
		str = $("#email").val();
		var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}))$/;
		if (!reg.test(str)) {
			$("#email1").html("<font color='red'>电子邮箱格式错误</font>");
			return false;
		} else {
			$.ajax({
				type:"GET",
				url:'/checkEmail/' + str,
				success:function (qq) {
					if (qq ==="true"){
						$("#email1").html("");
						$("#email").attr("qq","true");
					}else {
						$("#email1").html("<font color='red'>邮箱已占用</font>");
						$("#email").attr("qq","true");
					}
				}
			});
			return $("#email").attr("qq") === "true";
		}
	}

	function qq() {
		var code2 = $("#qwer").val();
		if (code2 === ""){
			$("#yzm").html("<font color='red'>请输入验证码</font>");
			return false;
		}else {
			$.ajax({
				type: "GET",
				url: "/verify",
				data: 'code=' + code2,
				success: function (text) {
					if (text === "true") {
						$("#yzm").html("");
						$("#qwer").attr("qq",'true');
					} else {
						$("#yzm").html("<font color='red'>验证码错误</font>");
						$("#qwer").attr("qq",'false');
					}
				}
			});
			return $("#qwer").attr("qq") === "true";
		}
	}
	function isPhone() {
		str = $("#phone").val();
		var reg =  /^1\d{10}$/;
		if (!reg.test(str)) {
			$("#phone1").html("<font color='red'>手机号码格式错误</font>");
			return false;
		} else {
			$.ajax({
				type:'GET',
				url:'/checkPhonename/' + str,
				success:function (text) {
					if (text === "true"){
						$("#phone1").html("");
						$("#phone").attr("qq",'true');
					}else {
						$("#phone1").html("<font color='red'>手机号码已注册</font>");
						$("#phone").attr("qq",'false');
					}
				}
			});
			return $("#phone").attr("qq") === "true";
		}
	}
	
	function test1(){
		var wd1 = $("#ipwd").val();
		if(wd1.length === 0 || wd1.length < 6 || wd1.length > 12){
			$("#msg_pwd1").html("<font color='red'>不合规范,长度6-12位</font>");
			return false;
		}else{
			$("#msg_pwd1").html("");
			return true;
		}
	}

	function test2(){
		var wd2 = $("#i2pwd").val();
		if(wd2.length === 0){
			$("#msg_pwd2").html("<font color='red'>密码不能为空</font>");
			return false;
		}
		else{
			$("#msg_pwd2").html("");
			return true;
		}
	}
	
	function password(){
		var wd1 = $("#ipwd").val();
		var wd2 = $("#i2pwd").val();
		if(wd1 != wd2){
			$("#msg_pwd2").html("<font color='red'>密码不一致</font>");
			return false;
		}else{
			$("#msg_pwd2").html("");
			return true;
		}
	}
	
	function checkxinxi(){
		if(password() && test1() && test2() && qq() && isEmail() && isPhone() && nicheng()){
			return true;
		}else{
			alert("输入正确的信息");
			return false;
		}
	}
});


</script>
</body>

</html>
